<template>
  <h3>设备类型设置</h3>
  <!-- 搜索栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-form :model="deviceQuery" inline>
        <el-form-item label="设备类型名称">
          <el-input v-model="deviceQuery.deviceName" placeholder="请输入设备类型名称"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="全部" style="width:100px" v-model="deviceQuery.deviceStatus">
            <el-option label="全部" :value="0"/>
            <el-option label="启用" :value="1"/>
            <el-option label="停用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadDevices">搜索</el-button>
          <el-button @click="reloadDevices">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="devices"
          border
          stripe
          ref="deviceTable"
          :load="loadChildrenDevice"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      ><!-- stripe可以为表格添加斑马纹样式，默认false -->
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="deviceEncode" label="设备类型编码" width="250" align="center"/>
        <el-table-column prop="deviceName" label="设备类型名称" width="250" align="center"/>
        <el-table-column prop="deviceStatus" label="是否启用" width="200" align="center">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.deviceStatus === 1">启用</el-tag>
            <el-tag type="danger" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deviceRemark" label="备注" width="350" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button-group>
                <el-button size="small" type="primary" @click="editDevice(scope.row.deviceId)">修改</el-button>
                <el-button size="small" type="success" @click="add(scope.row)">新增</el-button>
                <el-button size="small" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 新增设备子组件弹窗 -->
  <device-add :flag="addDevice" @cancelAdd="cancelAdd" @addComplete="loadDevices"/>
  <!-- 编辑设备子组件弹窗 -->
  <device-edit :deviceId="editDeviceId" @cancelEdit="cancelEdit" @editComplete="loadDevices"/>
</template>

<script setup>

// 封装查询条件
import {onMounted, ref} from "vue";
import deviceRequest from "@/api/device.js";
import DeviceAdd from "@/views/device/type-add.vue";
import DeviceEdit from "@/views/device/type-edit.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute} from "vue-router";

// 封装查询条件
let deviceQuery = ref({});
// 封装查询的结果集合
let devices = ref([]);
// 新增的addDevice
let addDevice = ref(-1);
// 封装子级设备搜索条件
let childrenDevice = ref({});
// 编辑的deviceId
let editDeviceId = ref(-1);
// 当前路由对象
let route = useRoute();




function add(){
  addDevice.value = 1;
}
function cancelAdd(){
  addDevice.value = -1;
}
function loadDevices(){
  deviceRequest.loadDevices(deviceQuery.value,res=>{
    devices.value = res.data;
  })
}
function reloadDevices(){
  deviceQuery.value.deviceName = null;
  deviceQuery.value.deviceStatus = 0;
  deviceRequest.loadDevices(deviceQuery.value,res=>{
    devices.value = res.data;
  })
}
function loadChildrenDevice(device, node, resole){
  childrenDevice.value.deviceId = route.params.deviceId;
  deviceRequest.loadDevices(childrenDevice.value,device.deviceId,res=>{
    resole(res.data);
  })
}

function editDevice(deviceId){
  editDeviceId.value = deviceId;
}
function cancelEdit() {
  editDeviceId.value = -1;
}
function deleteDevice(device){
  ElMessageBox.confirm(
      '您确定要将设备[' + device.deviceName + ']删除吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    deviceRequest.deleteDeviceById(device.deviceId, res => {
      ElMessage({
        type: "success",
        message: "操作完成"
      });
      loadDevices();
    })
  }).catch(() => {
  });
}

onMounted(()=>{
  loadDevices();
})
</script>

<style scoped>

</style>